:deep(.arco-breadcrumb) {
  margin-bottom: 20px;
}

/* 折叠面板 */
:deep(.arco-collapse-item) {
  border-bottom: 0;
  margin-bottom: 10px;
}

:deep(.arco-collapse-item-header) {
  background-color: #F2F3F5;
  border-radius: 2px;
  border: 0;
}

:deep(.arco-list-item) {
  padding: 5px 0 !important;
  cursor: pointer;
}

.user-manage {
  height: calc(100vh - 300px);

  ::v-deep(.arco-table-td) {
    border: none;
  }

  ::v-deep(.arco-scrollbar) {
    max-height: calc(100vh - 260px)
  }
}

.title {
  @include flex-align;

  .circle {
    width: 6px;
    height: 6px;
    margin-right: 9px;
    border-radius: 50%;
    background-color: #409EFF;
  }

  &-label {
    font-size: 18px;
    color: #131414;
    line-height: 24px;
  }
}

.custom-tabs {
  @include flex-align;
  margin-bottom: 13px;

  .tab-item {
    @include flex-inline-flex;
    width: 157px;
    height: 30px;
    background-color: #fff;
    border: 1px solid #DCDCDC;
    cursor: pointer;
  }

  .tab-item-active {
    border-color: #007DFF;
    color: #007DFF;
  }
}

.role-container {
  @include flex;
  height: calc(100% - 44px);
  .role-list {
    position: relative;
    min-width: 262px;
    max-width: 262px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 4px 5px 16px 0 rgba(4, 19, 74, 0.04);
    border-radius: 10px;
    margin-right: 24px;

    &-item {
      @include flex-align;
      justify-content: space-between;
      height: 40px;

      padding: 0 12px;
      margin-top: 12px;

      :deep(.arco-input-wrapper) {
        width: 180px;
      }

      .operate {
        @include flex-align;
        cursor: pointer;
        justify-content: right;
        width: 40px;
        gap: 10px;

        img{
          width: 16px;
          height: 16px;
        }
      }
    }

    .activeRole {
      background: rgb(var(--arcoblue-2));

      .role-name {
        color: rgb(var(--blue-6));
      }
    }
  }

  &-opt {
    @include flex;
    flex: 1;
    position: relative;
    background-color: #fff;
    box-shadow: 4px 5px 16px 0 rgba(4, 19, 74, 0.04);
    border-radius: 10px;

    .user-manage {
      width: 450px;

      &-search {
        margin-bottom: 10px;
      }
    }

    .role-permission {
      width: 100%;
    }
  }

  &-user {
    @include flex;
    width: 100%;
    background-color: #fff;
    box-shadow: 4px 5px 16px 0 rgba(4, 19, 74, 0.04);
    border-radius: 10px;

  }
}

/* 账户列表 */
.table-header {
  @include flex-between;
  margin-bottom: 24px;
}

:deep(.arco-btn) {
  width: 100%;
  margin-left: 0;
}

/* 抽屉 */
.drawer-role-body {
  @include flex;
  flex-direction: column;
  height: 100%;

  &__content {
    position: relative;
    flex: 1;

    // 单选
    :deep(.arco-radio-group) {
      width: 100%;
    }

    :deep(.arco-empty) {
      @include position-center;
    }
  }
}

.custom-tree {
  border: 1px solid #F2F3F5;
}

/**
添加用户
 */
.add-user-container {
  @include flex;
height: 100%;
  &__menu {
    @include flex;
    flex-direction: column;
    width: 270px;
    .tree-container{
      flex: 1;
      overflow: auto;
    }
  }

  &__user {
    @include flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    .table-container{
      flex: 1;
      overflow: auto;
    }
  }
}

:deep(.arco-modal-body) {
  padding: 0;
}

.modal-message {
  text-align: center;

  .del-name {
    width: 80%;
    margin: 12px auto;
    height: 60px;
    line-height: 60px;
    border: 1px solid #DCDFE6;
  }
}

.role-list {
  :deep(.arco-btn) {
    margin-top: 12px;
  }
}
